<template>
  <el-dialog v-model="visibleLocal" title="菜单详情" width="500px" @close="onClose">
    <el-descriptions :column="1" border v-if="menu">
      <el-descriptions-item label="ID">{{ menu.id }}</el-descriptions-item>
      <el-descriptions-item label="名称">{{ menu.name }}</el-descriptions-item>
      <el-descriptions-item label="路径">{{ menu.path }}</el-descriptions-item>
      <el-descriptions-item label="排序">{{ menu.order }}</el-descriptions-item>
      <el-descriptions-item label="ACL">{{ menu.acl }}</el-descriptions-item>
      <el-descriptions-item label="角色">{{ menu.role ? menu.role.name : "-" }}</el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <el-button @click="onClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted, computed } from "vue";
import { useMenuStore } from "@/stores/menu";

const props = defineProps<{ visible: boolean; menuId: number | null }>();
const emit = defineEmits<{ (e: "update:visible", v: boolean): void }>();

const visibleLocal = ref(props.visible);
watch(
  () => props.visible,
  (v) => (visibleLocal.value = v),
);

const menuStore = useMenuStore();
const menu = computed(() => menuStore.menuDetail);

const loadDetail = async () => {
  if (props.menuId) {
    await menuStore.getMenuDetail(props.menuId);
  }
};

watch(
  () => props.menuId,
  async () => {
    await loadDetail();
  },
);

onMounted(loadDetail);

const onClose = () => {
  emit("update:visible", false);
};
</script>
